@import '../../color.less'; 
.wrapModal {
    :global(.ant-modal-body) {
        padding: 10px 12px;
    }
}

.require {
    position: relative;
    &::before {
        position: absolute;
        content: '*';
        font-size: 22px;
        line-height: 22px;
        color: @warnColor;
        left: 2px;
        top: 2px;
    }
}

:global(.ant-popover-placement-topRight .ant-popover-inner-content){
    padding: 14px 10px;
}

.content {
    display: flex;
    flex-direction: column;
    .wrap {
        flex: 1;
        max-height: 350px;
        overflow-x: hidden;
        overflow-y: auto;
        :global(.ant-card) {
            margin-bottom: 10px;
            :global(.ant-card-body) {
                padding: 6px 10px;
                padding-bottom: 16px;
            }
        }
        .header {
            font-size: 14px;
            padding: 4px 0px;
            padding-bottom: 12px;
            vertical-align: middle;
            border-bottom: 1px solid @borderColor;
            color: #000;
            .icon {
                margin-right: 10px;
                font-size: 26px;
                vertical-align: middle;
            }
            .minus {
                float: right;
                position: relative;
                top: 3px;
                color: @warnColor;
                font-size: 20px;
            }
        }
        .title {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 10px 0;
            color: #000;
            div {
                width: 6px;
                height: 18px;
                background-color: @mainColor;
                margin-right: 8px;
            }
            .pathReq {
                position: relative;
                top: 2px;
                left: 2px;
                font-size: 22px;
                color: @warnColor;
            }
        }
        .wrapInput {
            padding-left: 12px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .wrapdate {
                width: 26%;
                text-align: right;
                padding-left: 14px;
                .date {
                    width: 100%;
                }
            }
            .name {
                width: 52%;
                text-align: right;
                padding-left: 14px;
                input {
                    width: 100%;
                }
            }
            .origin {
                width: 16%;
                padding-left: 14px;
                .select {
                    width: 100%;
                }
            }
            .require::before {
                left: 0px;
                top: 8px;
            }  
        }
        .wrapInput1 {
            padding-left: 10px;
            display: flex;
            .item0 {
                height: 48px;
                display: flex;
                align-items: center;
                input {
                    width: 90px;
                }
                :global(.ant-select) {
                    width: 66px;
                }
                .text {
                    margin-left: 4px;
                    width: 40px;
                    padding-left: 2px;
                }
                .rqeText {
                    margin-left: 2px;
                    width: 46px;
                    padding-left: 12px;                
                }
            }
            .item1 {
                input {
                    width: 52px;
                }
                .rqeText {
                    margin-left: 2px;
                    width: 36px;
                    padding-left: 12px;                
                }
            }
            .item2 {
                flex: 1;
                input {
                    width: 100%;
                }
            }
        }
    }
    button {
        width: 100px;
        margin-top: 12px;    
    }
}

.wrapInnerModal {
    :global(.ant-modal-body) {
        padding: 10px 12px;
        padding-bottom: 0;
    }
    .innerWrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .left {
            width: 48%;
            :global(.ant-tabs-bar) {
                border: 0;
                margin-bottom: 8px;
            }
            :global(.ant-tabs-nav .ant-tabs-tab) {
                padding: 8px 16px;
                padding-top: 0;
            }
            .listContent {
                background-color: #fff;
                height: 300px;
                overflow-x: hidden;
                overflow-y: auto;
                margin-top: 8px;
                .wrapItem {
                    margin-bottom: 4px;            
                    border-bottom: 1px solid @borderColor;
                    .top {
                        display: flex;
                        align-items: center;
                        padding-left: 4px;
                        div {
                            color: @mainColor;
                            border: 1PX solid @mainColor;
                            border-radius: 6px;
                            height: 28px;
                            width: 28px;
                            font-size: 16px;
                            line-height: 24px;
                            text-align: center;
                            flex-shrink: 0;
                            margin-right: 6px;
                        }
                        h3 {
                            margin: 0;
                        }
                    }
                    .bottom {
                        word-break: break-all;
                        div {
                            cursor: pointer;
                            padding: 8px 2px;
                            margin-top: 4px;
                        }
                        div.active {
                            background-color: @activeBgColor;
                        }
                        :global(.mdi-flag) {
                            font-size: 14px;
                            color: @warnColor;
                            margin-left: 2px;
                        }
                    }
                }
                .taskWrap {
                    padding: 6px 4px
                }
            }
        }
        .right {
            width: 50%;
            border-left: 1px solid @borderColor;
            padding-left: 10px;
            display: flex;
            flex-direction: column;  
            .rightTitle {
                color: #000;
                padding-bottom: 4px;
            }
            .rightWrap {  
                height: 322px;
                overflow-x: hidden;
                overflow-y: auto; 
                .item {
                    display: flex;
                    align-items: center;
                    padding: 6px 4px;
                    cursor: pointer;
                    .client {
                        font-size: 16px;
                        margin-right: 6px;
                    }
                    :global(.mdi-checkbox-marked-circle){
                        color: @mainColor;
                    }
                    .logo {
                        flex: 1;
                        text-align: right;
                        font-size: 22px;
                        color: @borderColor
                    }
                    .plus {
                        font-size: 20px;
                        margin-right: 2px;
                    }
                }
                .newItem {
                    color: @mainColor;
                }

            }
        }
        .footer {
            width: 100%;
            border-top: 1PX solid @borderColor;
            padding: 14px 4px;
            font-size: 14px;
            color: #000;
        }
    }
}

.empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 10px
}

.customContent {
    .item {
        display: flex;
        padding-bottom: 12px;
        .label {
            padding-right: 10px;
        }
        .value {
            flex: 1;
        }
    }
}

.renameContent {
    .wrap {
        display: flex;
        align-items: center;
        padding-bottom: 12px;
        .item {
            display: flex;
            align-items: center;
            :global(.ant-select) {
                min-width: 60px;
            }
        }
        .item1 {
            width: 26%;
        }
        .item2 {
            width: 37%;
        }
    }
    .wrap1 {
        justify-content: space-between;
        .item {
            width: 48%;
        }
    }
    .label {
        flex-shrink: 0;
        padding: 0 12px;
    }
}

.wrapViewImgModal {
    :global(.ant-modal){
        width: 75vw !important;
    }
    :global(.ant-modal-body) {
        padding: 0;
    }
    :global(.ant-modal-close-x){
        color: @mainColor;
        font-size: 24px;
    }
    .imgContent {
        max-height: 90vh;
        overflow: auto;
        img {
            width: 100%;
        }
    }
}